<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="edge" />
    <title>FEBS权限管理系统</title>
    <link rel="shortcut icon" type="image/png" th:href="@{/img/favicon.ico}" />
    <link rel="stylesheet" th:href="@{css/login.css}" type="text/css">
    <link rel="stylesheet" th:href="@{css/iCheck/minimal/green.css}" type="text/css">
    <link rel="stylesheet" th:href="@{css/app.css}" type="text/css">
    <!-- animate -->
    <link rel="stylesheet" th:href="@{css/animate/animate.min.css}" type="text/css">
    <script th:src="@{js/jquery.min.js}"></script>
    <script th:src="@{js/iCheck/icheck.js}"></script>
    <script th:src="@{js/bootstrap-notify/bootstrap-notify.min.js}"></script>
    <script th:src="@{js/common.js}"></script>
</head>
<body>
<!-- Form-->
<div class="form">
    <div class="form-toggle"></div>
    <div class="form-panel one">
        <div class="form-header">
            <h1 id="login-title">账户登录</h1>
        </div>
        <div class="form-content">
            <form action="#" method="post" onsubmit="return false">
                <div class="form-group type1">
                    <label>账号</label>
                    <input type="text" name="username" />
                </div>
                <div class="form-group type1">
                    <label>密码</label>
                    <input type="password" name="password" />
                </div>
                <div class="form-group type1" style="display:inline-block">
                    <label>验证码</label>
                    <input type="text" name="imageCode" style="width:50%; display:inline-block" />
                    <img data-th-src="@{/image/code}" id="validateCodeImg" onclick="reloadCode()" style="display:inline-block;margin-left:.2rem" />
                </div>
                <div class="form-group type2" style="display: none">
                    <label>手机号</label>
                    <input type="text" name="mobile" />
                </div>
                <div class="form-group type2" style="display: none">
                    <label>短信验证码</label>
                    <input type="text" name="smsCode" />
                </div>
                <div class="form-group type2" style="display: none">
                    <a href="javascript:void(0)" onclick="sendCode()" style="color: #32c787;font-weight: 600">发送短信验证码</a>
                    <a href="javascript:void(0)" class="type2" id="form-login" style="color: #32c787;font-weight: 600;display: none;">账号密码登录</a>
                </div>
                <div class="form-group" style="margin: 0;">
                    <p class="type1"><input type="checkbox"  name="remember-me" />&nbsp;&nbsp;记住我</p>
                    <a href="javascript:void(0)" class="type1" id="mobile-login" style="color: #32c787;font-weight: 600">短信验证码登录</a>
                </div>
                <div class="form-group" style="margin:0;justify-content:start;">
                    <a href="javascript:void(0)" id="social-login" style="color: #32c787;font-weight: 600">使用社交账号登录：</a>&nbsp;&nbsp;
                    <a href="/login/qq" title="QQ登录"><img th:src="@{img/social/QQ_bind.svg}" style="width: 1.4rem;"/></a>&nbsp;&nbsp;&nbsp;&nbsp;
                    <a href="/login/weixin" title="微信登录"><img th:src="@{img/social/wechat_bind.svg}" style="width: 1.7rem;margin-top: -1px;"/></a>
                </div>
                <div class="form-group">
                    <button class="type1" onclick="formLogin()" id="form-login-button" type="submit">登录</button>
                    <button class="type2" onclick="mobileLogin()" id="mobile-login-button" type="submit" style="display: none">登录</button>
                </div>
            </form>
        </div>
    </div>
    <div class="form-panel two">
        <div class="form-header">
            <h1>账户注册</h1>
        </div>
        <div class="form-content">
            <div class="form-group">
                <label>账号</label>
                <input type="text" name="username" />
            </div>
            <div class="form-group">
                <label>密码</label>
                <input type="password" name="password" />
            </div>
            <div class="form-group">
                <label>确认密码</label>
                <input type="password" name="cpassword" />
            </div>
            <div class="form-group">
                <button onclick="regist()">注册</button>
            </div>
        </div>
    </div>
</div>
<div data-th-include="common/footer"></div>
</body>
<script th:inline="javascript">
    var ctx = [[@{/}]];
</script>
<script data-th-src="@{js/app/login.js}"></script>
</html>